<template>
    <div class="footerGuide">
        <div class="all-flex all-justify-justify all-align-items-center footerGuideInner">
            <div :class="{active:'/msite'===$route.path}" @click="goto('/msite')">
                <span class="iconfont iconwaimai"></span>
                <p>外卖</p>
            </div>
            <div :class="{active:'/search'===$route.path}" @click="goto('/search')">
                <span class="iconfont iconsousuo"></span>
                <p>搜索</p>
            </div>
            <div :class="{active:'/order'===$route.path}" @click="goto('/order')">
                <span class="iconfont icondingdan"></span>
                <p>订单</p>
            </div>
            <div :class="{active:'/profile'===$route.path}" @click="goto('/profile')">
                <span class="iconfont iconwode"></span>
                <p>我的</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FooterGuide",
        methods:{
            goto (path){
                // this.$router.push(path)
                this.$router.replace(path)
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "../../common/stylus/mixins.styl"
.footerGuide
    position: fixed
    bottom:0
    height:1rem
    width:7.5rem
    background: #fff
    .footerGuideInner
        top-border-1px(#444)
        height 1rem
        >div
            flex:1
            text-align center
            color: #666
            >span
                font-size:0.4rem
                margin-bottom:0.1rem
                display: block
        >.active
            color: #1db95d
</style>